<template>
	<view class="page">
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<input v-model="keywords" type="text" placeholder="输入关键字" confirm-type="search"></input>
				<text class="cuIcon-roundclosefill" @tap="clear"></text>	
			</view>
			<view class="action" @tap="search">
				<button class="cu-btn round">搜索</button>
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item" v-for="item in productList">
				<view class="content _flex_row align-center">
					<view class="">
						<image :src="item.imgs" mode="aspectFill"></image>
					</view>
					<text class="title">{{item.name}}</text>
				</view>
				<view class="action">
					<button class="cu-btn round bg-green" @tap="editProduct(item)">修改</button>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
		<view class="footer align-center _flex_row justify-center" @tap="toPage('add_product')">
			<text class="lg text-gray cuIcon-roundadd"></text>
			<view class="text">添加产品</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {showProductList} from '@/api/index.js';
	import request from "@/common/request.js";
	var _self,
	pageSize = 10,
	currentPage = 1;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				keywords:'',
				productList:[],//商品列表
				loadingType: 'more', //加载更多状态
			}
		},
		onShow() {
			_self = this;
			currentPage=1;
			_self.productList = [];
			_self.getProductInfo();//获取产品列表
		},
		onPullDownRefresh: function() {
		 	_self.getProductInfo();//获取产品列表
		},
		//上拉加载收据
		onReachBottom: function() {
			if(_self.loadingType == 'nomore'){
				return false
			}
			currentPage++;
			_self.getProductInfo();//获取产品列表
		},
		methods: {
			//编辑
			editProduct(item){
				// uni.removeStorage({ key: 'productInfo'});
				// uni.setStorageSync('productInfo',item);
				
				let itemStr = JSON.stringify(item);
				uni.navigateTo({
					url:'add_product?item=' + itemStr,
					
				})
			},
			//添加
			addProduct(item){
				uni.removeStorage({ key: 'productInfo'});
				uni.navigateTo({
					url:'add_product'
				})
			},
			//清除搜索框
			clear(){
				this.keywords = ''
				this.getProductInfo()
			},
			//获取员工列表
			search(){
				this.getProductInfo()
			},
			//页面跳转
			toPage(page){
				uni.navigateTo({
					url:page
				});
			},
			//获取产品列表
			getProductInfo(){
				showProductList(_self.keywords,currentPage,pageSize).then(re =>{
					if(re.length < pageSize){
						_self.loadingType = 'nomore';
					}else{
						_self.loadingType = 'more'
					}
					if (re== '') {//没有数据
						_self.loadingType = 'nomore';
						uni.hideNavigationBarLoading();//关闭加载动画
						uni.stopPullDownRefresh();//得到数据后停止下拉刷新
						return;
					}
					if(currentPage==1){
						_self.productList = re
					}else{
						_self.productList = _self.productList.concat(re);//将数据拼接在一起
					}
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();//得到数据后停止下拉刷新
				}).catch(re=>{
				});
			},
		},
		// onLoad() {
		// 	request.post('/app/employees/list', {}).then(res=>{
		// 		if(res.code == 200) {
		// 			console.log(res)
		// 		}
		// 	})
		// }
	}
</script>

<style>
	page{background: #fff;}
	.search{position: fixed;top:0px;left:0;width:100%;z-index: 9;}
	input{color: #999999;font-size: 24rpx;padding-left:20rpx}
	.cuIcon-roundclosefill{font-size: 32rpx;color: #8F8E94;}
	.cu-btn{background-color: #fff;font-size: 28rpx;color: #424242;}
	.cu-list{
		padding-top:80rpx;
		padding-bottom: 100rpx;
	}
	.cu-item{
		height:160rpx;
	}
	image{height:100rpx;width:100rpx;border-radius: 100rpx;border: 2px solid #F5F5F5;}
	.title{color: #3E3E3E;font-size: 32rpx;font-weight: 600;margin-left: 20rpx;}
	.bg-green{
		background: url(../../../static/images/yuyue.png);
		background-size: 100% 100%;
		color: #fff;
		margin-left:10rpx;
	}
	.footer{
		background: url(../../../static/images/btn1.png);
		background-size: 100% 100%;
		color: #fff;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left:0;
		width:100%;
	}
	.cuIcon-roundadd{
		color: #fff;
		margin-right: 6rpx;
		font-size: 40rpx;
	}
</style>
